<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.ArrayList;" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../js/echarts.min.js"></script>
	
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css"/><!--栅格布局-->
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/templatemo-style.css"/>
	<style>
	    div{position:relative;}
			   
	    body{
			 overflow: hidden;
			 background-color :#fff;
			 background-image:url('../images/right_bg.jpg');
			 background-size: cover;
		}
				
		table{
	   		 margin:0px;
		}
		#container1{
			margin-top:20px;
			height:220px;
			background-color:none;
		    background-color:rgba(0,0,0,0.1); 
			color:red;
			border:3px solid #ccc; 
			
		}
		#container1:hover{
			transform:translateY(-6px);
			box-shadow:0 0 15px rgba(0,0,0,.8);
			border:3px solid rgb(148, 147, 147);
		}
	</style>
<title>首页</title>
</head>
<body bgcolor="#DAEEF3" style="overflow-Y: hidden; overflow-x: hidden;" id = "reportsPage">
	<!--从后台取出数据-->
	<%
		ArrayList<Integer> testDatalist = (ArrayList<Integer>)request.getAttribute("test_datalist");
		ArrayList<String> testNamelist = (ArrayList<String>)request.getAttribute("test_namelist");
	%><!--
	<div class="row tm-content-row">
		第一部分
    	<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-block-col">
        	<div class="tm-bg-primary-dark tm-block" >
            	--><!--<h2 class="tm-block-title">学生努力程度</h2>-->
                <div id="container1" style="height:480px;onclick="window.location='analysisstudent?ActionType=student_Effort_Level'"></div>
    			<script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container1'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<testDatalist.size();i++){%>  
						list[<%=i%>]=<%=testDatalist.get(i)%>;
						//document.write(list[<%=i%>]);
	 				<%}%>
	 				<%for(int i=0;i<testNamelist.size();i++){%>  
	 					title[<%=i%>]=" <%=testNamelist.get(i)%> ";
						//document.write(list[<%=i%>]);
 					<%}%>
        
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '考试成绩统计',
           				 	textStyle: {
	                            fontWeight: 'normal',             
	                            color: '#2A5D75'  //标题颜色A3FFFC
                     },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['人数'],
              			  	textStyle: {
                              fontWeight: 'normal',              
                              color: 'black'   //legend颜色
                      },
            			},
            			xAxis: {
                			data: title ,
                			//  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			yAxis: {
            			//  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '人数',
                			type: 'bar',
                			data: list,
                            itemStyle:{
                                normal:{
                                    color:'#C23531' //  给折线添加颜色2A5D75
                                },
                            }, 
            			}],
            		    dataZoom : [{
            		        type: 'slider',
            		        show: true,
            		        start: 94,
            		        end: 100,
            		        handleSize: 8
            		    },{
            		        type: 'inside',
            		        start: 94,
            		        end: 100
            		    },{
            		        type: 'slider',
            		        show: true,
            		        yAxisIndex: 0,
            		        filterMode: 'empty',
            		        width: 12,
            		        height: '70%',
            		        handleSize: 8,
            		        showDataShadow: false,
            		        left: '93%'
            		    }]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>
				<!--
				<button id="student" type="button" style="position:absolute;right:0;bottom:0;"
							 class=" btn-primary " onclick="window.location='analysisstudent?ActionType=student_Effort_Level'" >详情</button>
				--><!--
			</div>
		</div>
	</div>最外层div
--></body>
</html>